<template>
  <div class="apartment-box">
    <div class="apartment-content">
      <div class="title title-out">小区出</div>
      <div class="title title-in">小区入</div>
      <div id="main-out"></div>
      <div id="main-in"></div>
      <div class="inOut">
        <div class="out-data">{{outData}}</div>
        <div class="in-data">{{inData}}</div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'apartment',
  data () {
    return {
      outData: 637,
      inData: 457,
      chartData: [30, 52, 60, 40, 30, 80, 40, 87, 70, 90, 84, 49], // 绘制echarts小区出数据
      chart2Data: [30, 52, 60, 40, 30, 80, 40, 87, 70, 90, 84, 49], // 绘制echarts小区入数据
      chart: '',
      chart2: ''
    }
  },
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    option: {
      type: Object,
      default () {
        return {
          // title: {
          //   text: '小区出',
          //   textStyle: {
          //     color: '#fff',
          //     fontSize: 14,
          //     fontWeight: 'normal'
          //   },

          // },
          barCategoryGap: 2,
          color: ['#BAD87D'],
          grid: {
            x: '6%',
            y: '50%',
            x2: '8%',
            y2: 0,
            borderWidth: 1
          },
          xAxis: [
            {
              type: 'category',
              data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
              splitLine: {
                show: false
              },
              width: 7,
              show: false,
              axisLine: {
                lineStyle: {
                  width: 0
                }
              },
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              inverse: false,
              type: 'value',
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              show: false,
              axisLine: {
                lineStyle: {
                  width: 0
                }
              }
            }
          ],
          series: [
            {
              type: 'bar',
              // barWidth: '60%',
              data: []
            }
          ]
        }
      }
    }

  },
  mounted () {
    this.getChart()
    this.getChart2()
  },
  methods: {
    getChart () {
      let temp = this.option
      temp.series[0].data = this.chartData
      this.chart = this.$echarts.init(document.getElementById('main-out'))
      this.chart.setOption(this.option)
    },
    getChart2 () {
      let temp = this.option
      temp.color = '#7ACEF4'
      // temp.title.text = '小区入';
      temp.series[0].data = this.chart2Data
      this.chart2 = this.$echarts.init(document.getElementById('main-in'))
      this.chart2.setOption(this.option)
    }
  }

}
</script>

<style scoped>
  .apartment-box {
    width: 100%;
    margin-bottom: 10px;
  }

  .apartment-content {
    position: relative;
    width: 100%;
    background: rgba(43, 54, 72, 0.95);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 13px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
  }

  .apartment-content .title{
    position: absolute;
    color: #FFFFFF;
  }
  .apartment-content .title-out{
    top:18px;
    left:8%;
  }
  .apartment-content .title-in{
    top:18px;
    left:53%;
  }

  #main-out {
    width: 50%;
    height: 70px;
  }

  .out-data {
    position: absolute;
    top: 20%;
    right: 53%;
    color: #BAD87D;
  }

  .in-data {
    position: absolute;
    top: 20%;
    right: 9%;
    color: #7ACEF4;
  }

  #main-in {
    width: 50%;
  }
</style>
